<template>
  <div class="container">
    <!-- 切换栏 -->
    <div class="tabs">
      <span
        class="tab"
        :class="{ active: lan === 'diyi' }"
        @click="lan = 'diyi'"
      >{{ arr[0].title }}</span>
      <span
        class="tab"
        :class="{ active: lan === 'dier' }"
        @click="lan = 'dier'"
      >{{ arr[1].title }}</span>
      <span
        class="tab"
        :class="{ active: lan === 'disan' }"
        @click="lan = 'disan'"
      >{{ arr[2].title }}</span>
    </div>
    
    <!-- 阻止冒泡 -->
    <div class="content-panel" v-show="lan === 'diyi'">
      <h1>阻止冒泡行为</h1>
      <div class="event-bubbling-demo">
        <div class="outer" @click="wai">
          外层
          <div class="middle" @click="zhong">
            中层
            <div class="inner" @click.stop="nei">内层</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 超链接,阻止跳转 -->
    <div class="content-panel" v-show="lan === 'dier'">
      <h3>链接卡</h3>
      <p>点击链接阻止默认跳转</p>
      <ul class="link-list">
        <li>
          <a href="https://www.google.com" @click.prevent="zuzhi">谷歌(会被阻止默认跳转)</a>
        </li>
        <li>
          <a href="https://www.baidu.com">百度(正常)</a>
        </li>
      </ul>
    </div>
    
    <!-- 空的 -->
    <div class="content-panel" v-show="lan === 'disan'">
      <h3>空的</h3>
      <p>这里什么都没有 ¯\_(ツ)_/¯</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "LianXiView",
  data() {
    return {
      lan: "diyi",
      arr: [
        { id: 0, title: "阻止冒泡行为" },
        { id: 1, title: "阻止超链接默认跳转行为" },
        { id: 2, title: "空的,哈哈哈" },
      ],
    };
  },
  mounted() {},
  methods: {
    wai() {
      console.log("外层DIV被点击");
    },
    zhong() {
      console.log("中层DIV被点击");
    },
    nei() {
      console.log("内层点击div,触发冒泡阻止行为");
    },
    zuzhi() {
      console.log("默认跳转行为被阻止");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.tabs {
  display: flex;
  margin-bottom: 20px;
  
  .tab {
    padding: 10px 15px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin-right: -1px;
    
    &.active {
      background-color: #42b983;
      color: white;
      font-weight: bold;
    }
  }
}

.content-panel {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 200px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.event-bubbling-demo {
  .outer {
    padding: 20px;
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid red;
    margin: 10px 0;
  }
  
  .middle {
    padding: 15px;
    background-color: rgba(0, 255, 255, 0.1);
    border: 1px solid aqua;
    margin: 10px 0;
  }
  
  .inner {
    padding: 10px;
    background-color: rgba(255, 255, 0, 0.1);
    border: 1px solid yellow;
    margin: 10px 0;
  }
}

.link-list {
  list-style: none;
  padding: 0;
  
  li {
    margin-bottom: 10px;
    
    a {
      color: #42b983;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>